import React, { useRef, useEffect, useState } from 'react';
import { Spin } from 'antd';
import * as icons from '@ant-design/icons';
import {
  ProFormText,
  ModalForm,
  ModalFormProps,
  ProFormDigit,
  ProFormInstance,
  ProFormSelect,
  // ProFormDependency,
} from '@ant-design/pro-form';
import { services } from '@/network/api';

export type formProps = {
  id?: number;
  pid?: number;
  ptype?: number;
  _onFinish?: Function;
};

const getAccessList = async (params: any) => {
  let res = await services.getAccessList({ noPagination: true, noMsg: true, state: 1 });
  return res?.data?.map((item: any) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
};

const RouteForm: React.FC<ModalFormProps & formProps> = (props) => {
  const { visible, id, pid, ptype, _onFinish, ...restProps } = props;
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };
  const formRef = useRef<ProFormInstance<any>>();
  const [spinning, setSpinning] = useState(false);

  // 获取路由信息
  useEffect(() => {
    const getRoute = async () => {
      setSpinning(true);
      if (id && visible) {
        let res = await services.getRoute({ id });
        res.data.access = res?.data?.access?.map((item: any) => {
          return item.id;
        });
        res?.data?.province?.id &&
          res?.data?.city?.id &&
          (res.data.area = [res?.data?.province?.id, res?.data?.city?.id]);

        formRef.current?.setFieldsValue(res?.data);
      } else {
        formRef.current?.resetFields();
        formRef.current?.setFieldsValue({ type: ptype ? ptype + 1 : 1, pid });
      }
      setSpinning(false);
    };
    getRoute();
  }, [id, visible]);

  const onFinish = async (values: any) => {
    await services.saveRoute(values);
    _onFinish?.();
  };

  return (
    <>
      <ModalForm
        {...restProps}
        {...formItemLayout}
        formRef={formRef}
        title={id ? '编辑路由' : '新建路由'}
        width="500px"
        visible={visible}
        onFinish={onFinish}
        // initialValues={}
        layout="horizontal"
      >
        <Spin spinning={spinning}>
          <div className="hide">
            <ProFormDigit label="路由id" name="id" fieldProps={{ precision: 0, disabled: true }} />
          </div>
          <div className="hide">
            <ProFormDigit
              label="路由父id"
              name="pid"
              fieldProps={{ precision: 0, disabled: true }}
              initialValue={pid}
            />
          </div>
          <ProFormText
            label="路由权限名称"
            rules={[
              {
                required: true,
                message: '请输入路由名称',
              },
            ]}
            name="name"
          />
          <ProFormText
            label="路由路径"
            rules={[
              {
                required: true,
                message: '请输入路由路径',
              },
            ]}
            name="path"
          />
          <ProFormSelect
            label="路由类型"
            name="type"
            // disabled
            rules={[
              {
                required: true,
                message: '请选择路由类型',
              },
            ]}
            options={[
              { label: '菜单', value: 1 },
              { label: '页面', value: 2 },
              { label: '按钮', value: 3 },
            ]}
          />
          <ProFormSelect
            label="路由图标"
            name="icon"
            options={Object.keys(icons)
              .map((item) => {
                return { label: item, value: item, key: item };
              })
              .filter((item) => {
                const NO_USE_KEYS = [
                  'createFromIconfontCN',
                  'default',
                  'getTwoToneColor',
                  'setTwoToneColor',
                ];
                return NO_USE_KEYS.indexOf(item.label) === -1;
              })}
            fieldProps={{
              // virtual:false,
              optionItemRender(item) {
                return (
                  <>
                    {React.createElement(icons[item.label])}
                    {item.value}
                  </>
                );
              },
            }}
          />
          <ProFormSelect
            label="路由角色"
            name="access"
            fieldProps={{ mode: 'multiple' }}
            request={getAccessList}
          />
        </Spin>
      </ModalForm>
    </>
  );
};

export default RouteForm;
